<template>
	<div class="container-register">
		<div class="wrapper-register-form">
            <div class="login-logo">账号注册</div>
			<el-form ref="form" label-width="80px">
				<el-form-item label="账号" prop="username">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input
						type="password"
						v-model="form.password"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkpassword">
					<el-input
						type="password"
						v-model="form.checkpassword"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						style="width: 60%"
						type="primary"
						@click="register"
						>注册</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { apiRegister } from '../apis/index';

export default {
	name: 'Register',
	data() {
		return {
			form: {
				username: 'koa',
				password: '12345',
				checkpassword: '12345',
			},
		};
	},
	methods: {
		async register() {
			console.log(this.form);
			if (this.form.checkpassword !== this.form.password) {
				this.$message.warning('两次输入密码不同');
				return;
			}

			let res = await apiRegister(this.form);
			if (!res) return;
			if (res.code === 0) {
				this.$message.success(res.msg);
			} else {
				this.$message.warning(res.msg);
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.container-register {
	.wrapper-register-form {
		margin: 20px auto;
		padding: 16px;
		border: 2px solid #42b983;
		border-radius: 10px;
		width: 400px;

        .login-logo {
            font-size: 18px;
            margin: 16px 0;
        }
	}
}
</style>
